import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Form, Image, Button, Input, Picker } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getAvatar, getRuntime, userSexArr } from "../../utils/common";
import user_info_editStyleSheet from "./user_info_edit_styles";

import right from "../../assets/img/right.png";
import icon_79 from "../../assets/img/icon_79.png";
var _styleSheet = user_info_editStyleSheet;
let Company = class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userSexArr,
      currentSex: 2,
      avatar: icon_79,
      avatarSave: '',
      userInfo: {}
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '编辑资料' });
    this.getUserInfo();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getUserInfo() {
    let { userStore } = this.props.stores;
    userStore.getUserInfo({
      callback: res => {
        let currentSex = 2;
        if (res.userSex) {
          currentSex = res.userSex - 1;
        }
        this.setState({
          userInfo: toJS(res),
          avatar: toJS(res).avatar,
          avatarSave: toJS(res).avatar,
          currentSex
        });
      }
    });
  }
  changePicker(e) {
    this.setState({
      currentSex: e.detail.value
    });
  }
  submit(e) {
    let { userStore } = this.props.stores;
    let { name } = e.detail.value;
    let { avatarSave, currentSex } = this.state;
    if (!name) {
      getRuntime().showToast('昵称不能为空~');
    }
    userStore.modifyUser({
      form: {
        name,
        avatar: avatarSave,
        userSex: currentSex + 1
      },
      callback: () => {
        // 重新获取用户信息并缓存
        userStore.getUserInfo({
          callback: res => {
            res.token = getRuntime().getUserInfo().token;
            getRuntime().setUserInfo(res);
          }
        });
        getRuntime().showToast('保存成功,即将返回~');
        setTimeout(() => {
          getRuntime().navigateBack();
        }, 1000);
      }
    });
  }
  changeAvatar(e) {
    Taro.chooseImage({
      sourceType: ['album', 'camera'],
      count: 1
    }).then(res => {
      getRuntime().uploadFile([{ file: { path: res.tempFilePaths } }], url => {
        this.setState({
          avatar: url[0],
          avatarSave: url[0]
        });
      });
    }).catch(() => {
      getRuntime().showToast('上传文件失败，请稍后重试~');
    });
  }
  render() {
    let { userSexArr, currentSex, avatar, userInfo } = this.state;
    return <View style={_styleSheet["my-my_edit"]}>
       <Form onSubmit={this.submit.bind(this)}>
         <View style={_styleSheet["header"]}>
           <Image src={getAvatar(avatar)} onClick={this.changeAvatar.bind(this)} style={_styleSheet["my-bg"]} />
           <View style={_styleSheet["list-title"]}>点击更换头像</View>
         </View>

         <View style={_styleSheet["from-wrap"]}>

           <View style={_styleSheet["item-group"]}>
             <View style={_styleSheet["input-group"]}>
               <View style={_styleSheet["input-name"]}>昵称</View>
               <Input placeholder="未填写昵称" name="name" placeholderStyle={{ 'font-size': '26px' }} value={userInfo.name} style={_styleSheet["from-input"]} />
             </View>

             <View style={_styleSheet["input-group"]}>
               <View style={_styleSheet["input-name"]}>性别</View>
               <Picker mode="selector" name={'userSex'} value={userSexArr[currentSex]} range={userSexArr} onChange={this.changePicker.bind(this)} style={_styleSheet["input-picker"]}>
                 <View style={_styleSheet["tt"]}>
                   <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{userSexArr[currentSex]}</View>
                   <Image src={right} style={_styleSheet["drop-down-icon"]} />
                 </View>
               </Picker>
             </View>
           </View>

         </View>
         <Button formType={"submit"} style={_styleSheet["btn-line-submit"]}>保存</Button>
       </Form>
      </View>;
  }
};
Company = tslib_1.__decorate([inject("stores"), observer], Company);
export default Company;